<template>
    <div>
        订单号:<el-input v-model="list.orderNo" disabled></el-input></br>
        创建时间:<el-input v-model="list.createTime" disabled></el-input></br>
        收件人:<el-input v-model="list.receiverName" disabled></el-input></br>
        订单状态:<el-input v-model="list.statusDesc" disabled></el-input></br>
        支付方式:<el-input v-model="list.paymentTypeDesc" disabled></el-input></br>
        订单金额:<el-input v-model="list.payment" disabled></el-input></br>

        <table border cellspacing='0' >
            <tr>
                <th>商品图片</th>
                <th>商品信息</th>
                <th>单价</th>
                <th>数量</th>
                <th>合计</th>
            </tr>
            <tr v-for="(item,index) in tableData">
               <td><img style="wdith:80px;height:80px" :src="list.imageHost+item.productImage"/></td>
               <td>{{item.productName}}</td>
               <td>{{'￥'+item.totalPrice}}</td>
               <td>{{item.quantity}}</td>
               <td>{{'￥'+item.totalPrice}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
import {orderLook} from "../../../http/index.js";
    export default {
        data() {
            return {
                list:[],
                tableData:[]
            }
        },
        mounted(){
            console.log(this.$route.query.orderNo);
            this.orderLooks();
        },
        methods:{
            async orderLooks(){
                let res = await orderLook({orderNo:this.$route.query.orderNo})
                this.list=res.data.data;
                this.tableData=res.data.data.orderItemVoList
                console.log('list',this.list);
                console.log(res.data.data.orderItemVoList);
            }

        }
    }
</script>

<style lang="scss" scoped>
.el-input{
    width: 300px;
    margin-top: 20px;
    margin-left: 20px;
}
table{
    width: 800px;
    border-collapse: 0;
    td{
        height: 100px;
    }
}
</style>